<template>
<button @click="$emit('updatedCount',false)">-</button>
<input type="text" v-model.lazy="myCount" @change="onBtnChangeCount(myCount)" >
<button @click="$emit('updatedCount',true)">+</button>
</template>

<script setup>
import { computed, ref, watch } from 'vue';
const emit = defineEmits(['changeCount','updatedCount']);
const props = defineProps(['count']);
   
// function onBtnIncrease(){
//     emit('countIncrease');
// }
// function onBtnReduce(){
//     emit('countReduce');
// }
function onBtnChangeCount(data){
    emit('changeCount',data)
}

//侦听器
const myCount = ref(props.count); 
watch(()=>props.count, ()=>{
    myCount.value = props.count;    
})


//计算属性
// const myCount= computed({
//     get(){
//         return props.count;
//     },
//     set(newCount){
//         emit('changeCount',newCount)
//     }
// })






</script>

<style scoped>

</style>